<template>
  <v-main class="bg-grey-lighten-2">
    <v-container>
      <!--      <transition name="slide-fade">-->
      <v-tabs
        v-model="menuStore.activeTab"
        :key="menuStore.activeTab"
      >
        <v-tab
          v-for="(item) in menuStore.tabItems"
          :key="item.id"
          :value="item.id"
          :ripple="false"
          @click="menuStore.pushRouter(item.id)"
        >
          <v-chip
            :closable="!item.isAffix"
            color="primary"
            variant="plain"
            :ripple="false"
            @click:close="menuStore.closeTab(item)"
          >
            {{ item.title }}
          </v-chip>
        </v-tab>
      </v-tabs>
      <!--      </transition>-->
      <v-breadcrumbs :items="['Foo', 'Bar', 'Fizz']"></v-breadcrumbs>
      <custom-router-view :is-top-router-view="false"/>
    </v-container>
  </v-main>
</template>

<script lang="ts" setup>
import CustomRouterView from "@/layouts/components/CustomRouterView.vue";
import {useMenuStore} from "@/stores/menu";

const menuStore = useMenuStore()

</script>
<style>
/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>
